<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="55%" @close="handleClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px" class="demo-ruleForm">
                <el-form-item label="反馈建议类型" prop="categoryName">
                    <el-select v-model="form.categoryName" placeholder="请选择">
                        <el-option label="其他" value="0"></el-option>
                        <el-option label="举报" value="1"></el-option>
                        <el-option label="功能调整" value="2"></el-option>
                        <el-option label="异常报告" value="3"></el-option>
                        <el-option label="界面布局" value="4"></el-option>
                        <el-option label="操作问题" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="建议内容" prop="content">
                    <el-input type="textarea" v-model="form.content"  maxlength="1000" show-word-limit></el-input>
                </el-form-item>

                <el-form-item label="反馈图片" prop="imgDtos">
                    <el-upload :action="imageUploadUrl" list-type="picture-card" :file-list="fileList"
                        :on-remove="handleRemove" :on-success="handleAvatarSuccess">
                        <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { feedbackAdd, feedbackEdit, feedbackDetail } from "@/request/api/feedback"
import { getBuildData } from "@/request/api/building"
import rulesUtil from "@/utils/rules"//引入
export default {
    data() {
        return {
            dialogVisible: false,
            fileList: [],

            type: "",
            title: "",
            form: {
                // name: "",//链接名称
                // phone: "",//详情
                // createBy: "",//创建者id
                // createTime: "",//创建时间
                // updateTime: "",//发表时间
                // createName: "",//创建人
                categoryName: "",//分类名称
                content: "",//内容
                phone: "",//手机号
                // userId: "",//用户名
                imgDtos: [
                    //  imgName:'',//图片名称
                    //  imgUrl:"",//图片路径
                ],//图片
            },
            imgUrl: '',
            rules: {
                categoryName: [
                    { required: true, message: '请选择分类', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入建议内容', trigger: 'blur' },
                ],
                phone: [
                    { required: true, validator: rulesUtil.FormValidate.Form().validatePhone, trigger: 'blur' },
                ],
                galleryful: [
                    { required: true, validator: rulesUtil.FormValidate.Form().checkInterNumRequired, trigger: 'blur' },
                ],

            },
            imageUploadUrl: '/dev-api/file/upload/uploadNotQR',
            dataTree: [],
            selectCate: {
                checkStrictly: false,
                label: "categoryName",
                children: "children",
                value: "id",
                getCheckedNodes: true,
                expandTrigger: "hover",
                emitPath: true
            },
        };
    },

    methods: {
        open(type, info) {
            this.type = type;
            this.dialogVisible = true;
            this.form.imgDtos = []
            this.fileList = []
            if (this.type === "add") {
                this.title = "反馈建议";
                let params = {
                    categoryName: "",//分类名称
                    content: "",//内容
                    imgDtos: [ //房屋图片
                        // { "imgUrl": "tupianweizhi1" },
                        // // {"imgUrl":"图片2" },
                    ],
                }
                this.form = params
                this.fileList = []

            } else if (this.type === "edit") {
                this.title = "修改意见反馈";
                // this.form = info
                this.getDetail(info.id)
            }
        },
        // 区划
        selectValue(val) {
            this.$refs.cascader2.dropDownVisible = false;
        },
        handleClose() {
            this.$emit('getTrain')
            this.$refs.form.resetFields();

        },
        // 查看详情
        getDetail(id) {
            let params = {
                id
            }
            feedbackDetail(params).then(res => {
                if (res.data.code === 200) {
                    var imgs = res.data.result.imgDtos
                    this.form = res.data.result
                    imgs.forEach(item => {
                        this.fileList.push({
                            url: item.imgUrl,
                            id: item.id
                        })
                    })
                }

            })
        },
        // 创建
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.type === 'add') {
                        let params = { ...this.form }
                        feedbackAdd(params).then((res) => {
                            if (res.data.code === 200) {
                                this.$message({
                                    message: res.data.message,
                                    type: "success",
                                });
                                this.dialogVisible = false
                            } else {
                                this.$message.error(res.data.message);
                            }
                        });
                    } else if (this.type === 'edit') {
                        var imgList = this.form.imgDtos
                        var newImg=[]
                        imgList.forEach(item => {
                            newImg.push({
                                imgUrl: item.imgUrl,
                                imgName: item.imgName
                            })
                        })
                        let params = { ...this.form }
                        params.imgDtos=newImg
                        feedbackEdit(params).then((res) => {
                            if (res.data.code === 200) {
                                this.$message({
                                    message: res.data.message,
                                    type: "success",
                                });
                                this.dialogVisible = false
                            } else {
                                this.$message.error(res.data.message);
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },
        // 文件上传删除
        handleRemove(response) {
            var dataList = this.form.imgDtos;
            if (response.id) {
                for (var i = 0; i < dataList.length; i++) {
                    if (dataList[i].id.indexOf(response.id) > -1) {
                        var index = i;
                        dataList.splice(index, 1); //存在即删除
                    }
                }
            } else {
                for (var j = 0; j < dataList.length; j++) {
                    if (dataList[j].imgName.indexOf(response.name) > -1) {
                        var index2 = j;
                        dataList.splice(index2, 1); //存在即删除
                    }
                }
            }
            this.form.imgDtos = dataList
        },
        handleDownload(file) {

        },
        // 上传成功
        handleAvatarSuccess(response, file, fileList) {
            this.form.imgDtos.push({
                imgUrl: response.message,
                imgName: file.name,
            })
        },
        // 上传文件失败
        handleError(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },
        // 限制上传的类型
        beforeAvatarUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error("上传图片大小不能超过 10M!");
                return false;
            }
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "jpg" || testmsg === "JPG";
            const extension2 = testmsg === "png" || testmsg === "PNG";
            if (!extension && !extension2) {
                this.$message({
                    message: "上传图片只能是 jpg, png格式!",
                    type: "error",
                });
                return false;
            }
        },
    },
};
</script>
<style lang="less" scoped>
.el-input {
    width: 380px;
}

.el-cascader {
    width: 380px;
}

.el-textarea {
    width: 380px;
}

.el-radio-group {
    width: 380px;
}

.el-date-editor {
    width: 380px;
}

/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>

